<template>
  <div style="margin-top: 10px" class="app-contain">
    <el-row :gutter="50" class="paper-index-header">
      <el-col :span="24">
        <div class="item-contain">
          <span class="title">试卷类型：</span>
          <div class="item-radio">
            <el-radio-group v-model="queryParam.paperType">
              <el-radio
                v-for="item in paperTypeEnum"
                size="mini"
                :key="item.key"
                :label="item.key"
                @click.native.prevent="paperTypeclick(item.key)"
                >{{ item.value }}</el-radio
              >
            </el-radio-group>
          </div>
        </div>
        <div class="item-contain">
          <span class="title">试卷学科：</span>
          <div class="item-radio">
            <el-radio-group v-model="queryParam.subjectId">
              <el-radio
                v-for="item in subjects"
                size="mini"
                :key="item.id"
                :label="item.id"
                @click.native.prevent="subjectTypeclick(item.id)"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px" :gutter="50">
      <el-col :span="18">
        <el-card>
          <el-table
            v-loading="listLoading"
            :data="tableData"
            fit
            highlight-current-row
            style="width: 100%"
            @row-click="itemSelect"
            @sort-change="changeTableSort"
            @filter-change="filterHandler"
          >
            <el-table-column prop="id" label="序号" width="90" />
            <el-table-column
              prop="paperName"
              label="名称"
              show-overflow-tooltip
            />
            <el-table-column
              prop="subjectName"
              label="学科"
              :column-key="'subjectKey'"
              show-overflow-tooltip
            />
            <el-table-column
              prop="paperType"
              label="试卷类型"
              :column-key="'paperTypeKey'"
            >
              <template slot-scope="{ row }">
                {{ paperTypeEnumFormatter(row.paperType) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="difficult"
              label="难度"
              :sortable="'custom'"
            />
            <el-table-column
              prop="userScore"
              label="得分"
              :sortable="'custom'"
            />
            <el-table-column
              label="状态"
              prop="status"
              :filters="[
                { text: '待批改', value: 1 },
                { text: '完成', value: 2 },
              ]"
              :column-key="'statusKey'"
            >
              <template slot-scope="{ row }">
                <el-tag :type="statusTagFormatter(row.status)">
                  {{ statusTextFormatter(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="完成时间"
              width="170px"
              :sortable="'custom'"
            />
            <el-table-column align="right" fixed="right">
              <!-- <template slot-scope="{ row }">
              <router-link
                target="_blank"
                :to="{ path: '/edit', query: { id: row.id } }"
                v-if="row.status === 1"
              >
                <el-button type="text" size="small">批改</el-button>
              </router-link>
              <router-link
                target="_blank"
                :to="{ path: '/read', query: { id: row.id } }"
                v-if="row.status === 2"
              >
                <el-button type="text" size="small">查看试卷</el-button>
              </router-link>
            </template> -->
              <template slot-scope="{ row }">
                <router-link
                  target="_blank"
                  :to="{ path: '/read', query: { id: row.id } }"
                >
                  <el-button type="text" size="small">查看试卷</el-button>
                </router-link>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :background="false"
            :page.sync="queryParam.pageIndex"
            :limit.sync="queryParam.pageSize"
            @pagination="search"
            style="margin-top: 20px"
          />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="record-answer-info">
          <el-form label-width="50%">
            <el-form-item label="系统判分：">
              <span>{{ selectItem.systemScore }}</span>
            </el-form-item>
            <el-form-item label="最终得分：">
              <span>{{ selectItem.userScore }}</span>
            </el-form-item>
            <el-form-item label="试卷总分：">
              <span>{{ selectItem.paperScore }}</span>
            </el-form-item>
            <el-form-item label="正确题数：">
              <span>{{ selectItem.questionCorrect }}</span>
            </el-form-item>
            <el-form-item label="总题数：">
              <span>{{ selectItem.questionCount }}</span>
            </el-form-item>
            <el-form-item label="用时：">
              <span>{{ selectItem.doTime }}</span>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
import Pagination from "@/components/Pagination";
import examPaperAnswerApi from "@/api/examPaperAnswer";
import { scrollTo } from "@/utils/scroll-to";
export default {
  components: { Pagination },
  data() {
    return {
      queryParam: {
        pageIndex: 1,
        pageSize: 10,
        sort: "id desc",
        paperType: "",
        subjectId: "",
        status: [],
        difficult: null,
      },
      listLoading: false,
      tableData: [],
      total: 0,
      selectItem: {
        systemScore: "0",
        userScore: "0",
        doTime: "0",
        paperScore: "0",
        questionCorrect: 0,
        questionCount: 0,
      },
    };
  },
  created() {
    this.search();
    this.initSubject();
    // let _this = this;
    // subjectApi.list().then((res) => {
    //   console.log(res.response);
    //   for (let item of res.response) {
    //     var x = new Object();
    //     x.value = item.id;
    //     x.text = item.name;
    //     _this.subjectFilter.push(x);
    //   }
    // });
    scrollTo(0, 800);
  },
  methods: {
    paperTypeclick(e) {
      e === this.queryParam.paperType
        ? (this.queryParam.paperType = null)
        : (this.queryParam.paperType = e);
      this.search();
    },
    subjectTypeclick(e) {
      e === this.queryParam.subjectId
        ? (this.queryParam.subjectId = null)
        : (this.queryParam.subjectId = e);
      this.search();
    },
    filterHandler(filters) {
      // if (filters.paperTypeKey) {
      //   this.queryParam.paperTypeList = filters.paperTypeKey;
      // }
      // if (filters.subjectKey) {
      //   this.queryParam.subjectList = filters.subjectKey;
      // }
      if (filters.statusKey) {
        this.queryParam.status = filters.statusKey;
      }
      this.search();
      // const property = column["property"];
      // this.queryParam.paperType = value;
    },
    changeTableSort(column) {
      //获取字段名称和排序类型
      var fieldName = column.prop;
      var sortingType = column.order;
      this.queryParam.pageIndex = 1;
      let x = "";
      if (fieldName == "userScore") {
        x = "user_score";
      } else if (fieldName == "createTime") {
        x = "create_time";
      } else if (fieldName == "difficult") {
        x = "difficult";
      }
      if (sortingType == "descending") {
        this.queryParam.sort = x + " desc";
      } else {
        this.queryParam.sort = x + " asc";
      }
      this.search();
    },
    search() {
      this.$nextTick(() => {
        this.listLoading = true;
        let _this = this;
        examPaperAnswerApi.pageList(this.queryParam).then((data) => {
          const re = data.response;
          console.log(re);
          _this.tableData = re.list;
          _this.total = re.total;
          _this.queryParam.pageIndex = re.pageNum;
          _this.listLoading = false;
        });
      });
    },
    itemSelect(row, column, event) {
      this.selectItem = row;
    },
    statusTagFormatter(status) {
      return this.enumFormat(this.statusTag, status);
    },
    statusTextFormatter(status) {
      return this.enumFormat(this.statusEnum, status);
    },
    paperTypeEnumFormatter(status) {
      return this.enumFormat(this.paperTypeEnum, status);
    },
    subjectFormatter(status) {
      return this.subjectEnumFormat(this.subjects, status);
    },
    ...mapActions("exam", { initSubject: "initSubject" }),
  },
  computed: {
    ...mapGetters("enumItem", ["enumFormat"]),
    ...mapState("enumItem", {
      statusEnum: (state) => state.exam.examPaperAnswer.statusEnum,
      statusTag: (state) => state.exam.examPaperAnswer.statusTag,
      paperTypeEnum: (state) => state.exam.examPaper.paperTypeEnum,
    }),
    ...mapState("exam", {
      subjects: (state) => state.subjects,
    }),
  },
};
</script>

<style lang="scss" scoped>
.paper-index-header {
  border-bottom: 1px solid rgb(86, 172, 253);
}

.paper-index-header .item-contain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.paper-index-header .title {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  display: inline-block;
  width: 85px;
  vertical-align: top;
  margin-bottom: 16px;
  text-align: right;
}
.paper-index-header .item-radio {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.paper-index-header .el-radio {
  margin-right: 24px;
  padding: 2px 8px;
  line-height: 20px;
  border-radius: 4px;
}

/deep/ .paper-index-header .el-radio .el-radio__input {
  display: none;
}
.paper-index-header .is-checked {
  background-color: #56acfd;
}
/deep/ .paper-index-header .is-checked .el-radio__label {
  color: #fff;
}
/deep/ .paper-index-header .el-radio .el-radio__label {
  font-weight: 400;
  padding-left: 0;
}
</style>
